<script setup lang='ts'>
    import {onMounted, ref} from 'vue'
    import * as echarts from 'echarts'
    // 引入中国地图的json数据
    //@ts-ignore
    import chinaJSON from './china.json'
    // 注册中国地图
    echarts.registerMap('china', chinaJSON)
    const map = ref<any>()
        onMounted(() => {
        // 获取echarts实例
        const mycharts = echarts.init(map.value)
        mycharts.setOption({
            // 地图组件
            geo: {
                map: 'china',
                label: {
                    show: true, // 地图文字
                    color: '#fff',
                    fontSize: 14
                },
                itemStyle: {
                    color: {
                        // 每一个图形的样式
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#a1c2f0' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5979d7' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                    // opacity: .8
                },
                // 高亮时
                emphasis: {
                    itemStyle: {
                        color: '#476cdf '
                    },
                    label: {
                        fontSize: 40,
                        color: 'skyblue'
                    }
                },
                 
                
            },
            series: [
                    {
                        type: 'lines', // 航线系列
                        data: [
                        {
                            coords: [
                                [116.405285, 39.904989], // 起点
                                [104.065735, 30.659462] // 终点
                            ],
                            lineStyle: {
                                color: '#0a7aec',
                                width: 6
                            }
                        },
                        {
                            coords: [
                                [116.405285, 39.904989], // 起点
                                [102.712251, 25.040609] // 终点
                            ],
                            lineStyle: {
                                color: '#0a7aec',
                                width: 6
                            }
                        }
                        ],
                        // 动画特效
                        effect: {
                            show: true,
                            symbol: 'arrow',
                            color: 'black',
                            symbolSize: 10,
                        },
                    }
            ],
            // 布局组件
            grid: {
                left: 0,
                right: 0,
                bottom: 0,
                top: 0
            },
        })
    })
</script>


<template>
    <div class="box4" ref="map"></div>
</template>


<style scoped lang='scss'>

</style>